import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import Qt.labs.controls 1.0
import QtQuick.XmlListModel 2.0
import "../template" as Template
import "../js/AttendCarNavigator.qml.js" as Ln

Template.Navigator {
    id: nav
    title: "练车报名"



    SystemPalette {
        id: systemPalette
    }

    XmlListModel {
        id: xmlModel
        source: http.build("/attend.xml", {})
        query: "/attends/attend"

        XmlRole { name: "name"; query: "name/string()" }
        XmlRole { name: "date"; query: "date/string()" }
        XmlRole { name: "time"; query: "time/string()" }
        XmlRole { name: "mobile"; query: "mobile/string()" }
        XmlRole { name: "description"; query: "description/string()" }

        function events(date) {
            for (var i = 0; i < xmlModel.count; i++) {

                if (xmlModel.get(i).date == date)
                    return true
            }
            return false
        }

        onStatusChanged: {
            if (xmlModel.status == XmlListModel.Ready) {
                calendar.selectChanged()
            }
        }
    }
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 9
        Flickable {
            id: flickable

            Layout.fillHeight: true
            Layout.fillWidth: true
            contentWidth: parent.width
            contentHeight:720

            ScrollIndicator.vertical: ScrollIndicator { }
            ColumnLayout {
                anchors.fill: parent
                spacing: 12
                anchors.margins: 9


                Calendar {
                    id: calendar
                    weekNumbersVisible: false


                    Layout.fillWidth: true
                    Layout.preferredHeight: implicitHeight * 1.2
                    style: CalendarStyle {
                        dayDelegate: Item {
                            readonly property color sameMonthDateTextColor: "#444"
                            readonly property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : systemPalette.highlight
                            readonly property color selectedDateTextColor: "white"
                            readonly property color differentMonthDateTextColor: "#bbb"
                            readonly property color invalidDatecolor: "#dddddd"

                            Rectangle {
                                anchors.fill: parent
                                border.color: "transparent"
                                color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                                anchors.margins: styleData.selected ? -1 : 0
                            }

                            Image {
                                visible: xmlModel.events(Qt.formatDate(styleData.date, "yyyy-MM-dd"))
                                anchors.top: parent.top
                                anchors.left: parent.left
                                anchors.margins: -1
                                width: 12
                                height: width
                                source: "../images/eventindicator.png"
                            }

                            Label {
                                id: dayDelegateText
                                text: styleData.date.getDate()
                                anchors.centerIn: parent
                                color: {
                                    var color = invalidDatecolor;
                                    if (styleData.valid) {
                                        // Date is within the valid range.
                                        color = styleData.visibleMonth ? sameMonthDateTextColor : differentMonthDateTextColor;
                                        if (styleData.selected) {
                                            color = selectedDateTextColor;
                                        }
                                    }
                                    color;
                                }
                            }
                        }
                    }
                    onSelectedDateChanged: {

                        selectChanged()
                    }

                    function selectChanged() {

                        listModel.clear()
                        var date = Qt.formatDate(calendar.selectedDate, "yyyy-MM-dd")

                        for (var i = 0; i < xmlModel.count; i++) {
                            var obj = xmlModel.get(i)
                            if (obj.date == date) {
                                listModel.append({xindex: i, name: obj.name, time: obj.time,
                                                     mobile: obj.mobile,
                                                     description: obj.description})
                            }

                        }
                        return false
                    }
                }



                ListView {
                    id: listview
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    header: Item {
                        width: listview.width
                        height: 48

                        Label {
                            text: "报名参数人数详情"
                            font.pixelSize: 19
                            anchors.horizontalCenter: parent.horizontalCenter
                            height: parent.height
                            verticalAlignment: Text.AlignVCenter
                        }

                        Rectangle {
                            height: 1
                            width: listview.width / 3 * 2
                            color: "red"
                            anchors.bottom: parent.bottom
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
                    }

                    model: ListModel{
                        id: listModel
                    }

                    delegate: ItemDelegate {
                        width: listview.width
                        height: 128
                        Column {
                            spacing: 12
                            anchors.verticalCenter: parent.verticalCenter
                            Label {
                                text: "姓名：" + name
                            }
                            Label {
                                text: "电话：" + mobile
                            }

                            Label {
                                text: "时间：" + time
                            }
                            Label {
                                text: "描述：" +description
                            }
                        }

                        Rectangle {
                            height: 1
                            color: "darkseagreen"
                            width: parent.width
                            anchors.bottom: parent.bottom
                        }
                    }


                }

                MyCarAttend {
                    id:mycar
                    date: Qt.formatDate(calendar.selectedDate, "yyyy-MM-dd")
                    mobile: usinfo.mobile
                    onCallback: Ln.post(date, name, mobile, time, description)
                }
            }
        }

        Button {
            text: "我要报名"
            Layout.preferredWidth: implicitWidth * 2
            Layout.alignment: Qt.AlignHCenter
            onClicked: mycar.open()
        }
    }
}
